<template>
    <div>
        <Layout>
            <Content>
                <Row type="flex" justify="center" class="code-row-bg">
                    <p style="position: center;font-size: 25px">{{ otherName }}</p>
                </Row>
                <Scroll height="480" class="scroll">
                    <Row v-for="item in MessageList" :key="item.messageItemId" :value="item.messageItemId">
                        <Col v-if="item.messageSenderId===userId" span="10" offset="14">
                            <avatar v-bind:src="userAvatar" size="45" style="float: right;margin: fill"></avatar>
                            <Card style="height: fit-content;width: fit-content;float: right">
                                <p v-if="item.messageContent.length<10" style="text-align: right">{{ item.messageContent }}</p>
                                <p v-else >{{ item.messageContent }}</p>
                            </Card>
                        </Col>
                        <div v-else>
                            <Row type="flex" justify="center" align="middle">
                                <avatar v-bind:src="otherAvatar" size="45" style="float: left"></avatar>
                                <Col>
                                    {{ item.senderName }}
                                    <Card style="height: fit-content">
                                        <p style="text-align: left">{{ item.messageContent }}</p>
                                    </Card>
                                </Col>
                            </Row>
                        </div>
                    </Row>
                </Scroll>
            </Content>
            <Footer>
                <Form>
                    <Button @click="sentToSeller">发送</Button>
                    <Input v-model="messageContent" type="textarea" :rows="4"
                           placeholder="请输入您想咨询的问题"></Input>
                </Form>
            </Footer>
        </Layout>
    </div>
</template>

<script>
    import axios from "axios";
    import globalData from "@/utils/globalData";
    /*
        更新聊天信息的思路
            在数据库中增加是否已读的字段
            每隔一段时间获取所有的未读信息
                将这些未读信息设置为已读（或者直接将全部信息设置为已读会不会快一点）
            前端获取到所有的未读信息之后
                将这些信息push到MessageList中
            前端还需要判断如果是未读消息则显示红点
     */
    export default {
        name: "MessageShow",
        data() {
            return {
                userAvatar: '',
                otherAvatar: '',
                otherName:'',
                userId: '',
                talkerId: 0,
                MessageList: [],
                talkInfo: {},
                messageContent: "",
            }
        },
        mounted() {
            let self = this
            this.timer = setInterval(() => {
                self.getUnreadMessage()
            }, 1000)
            //需要调用函数来让组件销毁的时候一并销毁掉setInterval，否则将会在切换到其他界面的时候仍然持续发起请求
            this.$once('hook:beforeDestroy', function () {
                clearTimeout(this.timer)
            })
        },
        watch: {
            //重复定位到组件钩子函数不会起作用，需要监听路由参数
            "$route.params": function () {
                this.talkerId = this.$route.params.id
                this.userAvatar = globalData.userAvatar
                this.userId = globalData.USER.userId
                // this.refreshMessage()
                let self = this
                axios({
                    method: 'get',
                    url: "/message/talk/" + this.talkerId
                }).then(function (res) {
                    self.talkInfo = res.data
                    let my = self
                    let otherId = ""
                    let otherAvatar = ""
                    if (globalData.USER.userId === self.talkInfo.otherId)//将userId作为otherId
                    {
                        otherId = self.talkInfo.userId
                        otherAvatar = self.talkInfo.userAvatarUUID
                        self.otherName=self.talkInfo.userName
                    } else {
                        otherId = self.talkInfo.otherId
                        otherAvatar = self.talkInfo.otherAvatarUUID
                        self.otherName=self.talkInfo.otherName
                    }
                    console.log(self.otherName+"：Test")
                    axios({
                        method: 'get',
                        url: 'message/list/' + globalData.USER.userId + "/" + otherId
                    }).then(function (res) {
                        my.MessageList = res.data
                    })
                    axios({
                        method: 'get',
                        url: '/file/sig/avatar/' + otherAvatar,
                        responseType: 'blob'
                    }).then(function (res) {
                        my.otherAvatar = window.URL.createObjectURL(res.data)
                    })
                })
            }
        },
        created: function () {
            this.userAvatar = globalData.userAvatar
            this.talkerId = this.$route.params.id
            this.userId = globalData.USER.userId
            // this.refreshMessage()
            let self =this
            axios({
                method: 'get',
                url: "/message/talk/" + this.talkerId
            }).then(function (res) {
                self.talkInfo = res.data
                console.log(self.talkInfo)
                let my = self
                let otherId = ""
                let otherAvatarUUID = ""
                if (globalData.USER.userId === self.talkInfo.otherId)//将userId作为otherId
                {
                    otherId = self.talkInfo.userId
                    otherAvatarUUID = self.talkInfo.userAvatarUUID
                    self.otherName=self.talkInfo.userName
                } else {
                    otherId = self.talkInfo.otherId
                    otherAvatarUUID = self.talkInfo.otherAvatarUUID
                    self.otherName=self.talkInfo.otherName
                }
                axios({
                    method: 'get',
                    url: 'message/list/' + globalData.USER.userId + "/" + otherId
                }).then(function (res) {
                    my.MessageList = res.data
                })
                axios({
                    method: 'get',
                    url: '/file/sig/avatar/' + otherAvatarUUID,
                    responseType: 'blob'
                }).then(function (res) {
                    my.otherAvatar = window.URL.createObjectURL(res.data)
                })
            })
        },
        methods: {
            sentToSeller() {
                //后端
                let Scroll=this.$el.getElementsByClassName("scroll")[0]
                Scroll.scrollTop=Scroll.scrollHeight + 34
                let self = this
                let otherId = ""
                if (this.talkInfo.otherId === this.userId) {
                    otherId = this.talkInfo.userId
                } else {
                    otherId = this.talkInfo.otherId
                }
                let SendMessage = {
                    messageContent: this.messageContent,
                    messageSenderId: this.userId,
                    senderName: globalData.USER.nickName,
                    messageReceiverId: otherId,
                    receiverName: this.talkInfo.otherName
                }
                axios({
                    method: 'post',
                    url: '/message',
                    data: SendMessage
                }).then(function () {
                    //前端
                    self.MessageList.push(SendMessage)
                    self.messageContent = ""
                })
            },
            getUnreadMessage() {
                let self = this
                let otherId = ''
                if (this.talkInfo.otherId === this.userId) {
                    otherId = this.talkInfo.userId
                } else {
                    otherId = this.talkInfo.otherId
                }

                axios({
                    method: 'get',
                    url: 'message/unread/' + this.userId + "/" + otherId
                }).then(function (res) {
                    let newMessageList = res.data
                    for (let i = 0; i < newMessageList.length; i++) {
                        self.MessageList.push(newMessageList[i])
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>